/*
    应用中心-应用管理-镜像仓库创建应用
 */

<template>
    <div class="warehouse">
        <!-- 应用基本设置.start -->
        <el-form :model="appBaseInputForm" status-icon ref="appBaseInputForm" :rules="appBaseInputFormRules" label-width="140px" style="position:relative;margin-bottom:10px;">
            <el-form-item label="应用名称(中文)" v-show="showAppNameInput"  style="width:48%;display:inline-block;" prop="appName">
                <el-input v-model="appBaseInputForm.appName" placeholder="请输入应用名称"></el-input>
            </el-form-item>
            <el-form-item label="应用名称(英文)" v-show="showAppNameKubeInput" style="width:48%;display:inline-block;" prop="appNameKube">
                <el-input v-model="appBaseInputForm.appNameKube" placeholder="请输入应用名称"></el-input>
            </el-form-item>
            <el-form-item  label="镜像名称" style="width:48%;display:inline-block;" prop="image">
                <el-input :disabled="true" v-model="appBaseInputForm.image" placeholder="请输入镜像名称"></el-input>
            </el-form-item>
            <el-form-item label="镜像版本" v-show="showImageversionSelect"  style="width:48%;display:inline-block;" class="house-bd" prop="imageVersion">
                <el-select @visible-change="visibleChangeImageVersion" @change="changeImageVersionValue" v-model="appBaseInputForm.imageVersion" placeholder="请选择镜像版本" style="width:100%;">
                    <el-option v-for="item in imageVersionArr" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" style="width:48%;display:inline-block;" prop="described">
                <el-input v-model="appBaseInputForm.described" type="textarea" ></el-input>
            </el-form-item>
            <el-form-item class="mirror">
                <el-button type="primary" v-show="showSelectImageButton" icon="el-icon-plus" size="small" @click="openSelectImageDialog">选择镜像</el-button>
                <el-button type="info" :disabled="disabledImageVersionDescribedButton" v-show="showImageVersionDescribedButton" icon="el-icon-tickets" size="small" @click="openImageVersionDescribedDailog">版本明细</el-button>
            </el-form-item>
        </el-form>
        <!-- 应用基本设置.end -->

        <!-- 折叠面板,关于选择镜像的一些参数设置.start -->
        <el-collapse v-model="activeNames">
            <!-- 基本设置.start -->
            <el-collapse-item name="1">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">基本设置</span><span style="margin-left:4%;">服务应用类型,实例个例等配置</span>
                </template>
                <el-form label-width="100px">
                    <el-form-item label="应用类型">
                        <el-radio class="radio" @change="showPVCTable" v-model="appBaseInputForm.appKind" label="Deployment">无状态应用（包括web类，API类）</el-radio>
                        <el-radio class="radio" @change="showPVCTable" v-model="appBaseInputForm.appKind" label="StatefulSet">有状态应用（包括DB类，集群类，信息中间件类，数据类）</el-radio>
                    </el-form-item>
                    <el-form-item label="实例个数">
                        <template>
                            <el-input-number v-model="appBaseInputForm.replicas" controls-position="right" :min="1" :max="10"></el-input-number>
                        </template>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <!-- 基本设置.end -->

            <!-- 内存选项.start -->
            <el-collapse-item name="2">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">资源配置</span><span style="margin-left:4%;">容器内存,CPU,最大限度使用设置</span>
                </template>



                <el-form label-width="100px">
                    <!-- <el-form-item label="请求内存">
                        <el-radio-group v-model="appBaseInputForm.requestsMemory">
                        <el-radio-button label="126Mi"></el-radio-button>
                        <el-radio-button label="256Mi"></el-radio-button>
                        <el-radio-button label="512Mi"></el-radio-button>
                        <el-radio-button label="1Gi"></el-radio-button>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="最大使用内存">
                        <el-radio-group v-model="appBaseInputForm.limitsMemory">
                        <el-radio-button label="512Mi"></el-radio-button>
                        <el-radio-button label="1Gi"></el-radio-button>
                        <el-radio-button label="2Gi"></el-radio-button>
                        <el-radio-button label="4Gi"></el-radio-button>
                        <el-radio-button label="6Gi"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="最大使用CPU">
                        <el-radio-group v-model="appBaseInputForm.limitsCPU">
                        <el-radio-button label="512m"></el-radio-button>
                        <el-radio-button label="1000m"></el-radio-button>
                        <el-radio-button label="2000m"></el-radio-button>
                        <el-radio-button label="3000m"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <!-- 内存选项.end -->

            <!-- 辅助设置.start -->
            <el-collapse-item name="3">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">辅助设置</span><span style="margin-left:4%;">服务启动命令，镜像拉取策略设置</span>
                </template>
                <el-form label-width="100px">
                    <el-form-item label="命令启动">
                        <el-radio-group v-model="appBaseInputForm.startCommand" @change="changeStartCommand">
                            <el-radio :label="1">镜像默认</el-radio>
                            <el-radio :label="2">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="启动命令" >
                            <el-input :disabled="disableStartCommandInput" v-model="appBaseInputForm.command" placeholder="/opt/run.sh" style="width:30%"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <!-- 启动参数.start -->
                        <el-form :model="commandArgsForm" status-icon ref="commandArgsForm">
                            <el-form-item
                                v-for="(commandArgs, index) in commandArgsForm.commandArgs"
                                :key="commandArgs.id"
                                :prop="'commandArgs.' + index + '.arg'"
                                :rules="[
                                    { required: true, message: '启动参数参数不能为空', trigger: 'blur' }
                                ]"
                            >
                                <!-- 启动参数.输入框 -->
                                <el-input v-model="commandArgs.arg" style="width:50%"></el-input>
                                <!-- 启动参数.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="removeCommandArgsFormRow(commandArgs)"></el-button>
                            </el-form-item>
                            <!-- 添加一条启动参数 -->
                            <el-form-item>
                                <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="mini"  round @click="addCommandArgsFormRow" >添加一条启动参数</el-button>
                            </el-form-item>
                        </el-form>

                        <!-- 启动参数.end -->
                    </el-form-item>
                    <el-form-item label="重新部署">
                        <el-radio class="radio" v-model="appBaseInputForm.imagePullPolicy" label="IfNotPresent">优先使用本地镜像</el-radio>
                        <el-radio class="radio" v-model="appBaseInputForm.imagePullPolicy" label="Always">始终拉取云端该版本镜像</el-radio>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <!-- 辅助设置.end -->

            <!-- 端口管理.start -->
            <el-collapse-item name="4" style="display:none">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">端口管理</span><span style="margin-left:4%;">服务端口设置管理</span>
                </template>
                <!-- 端口管理数据表格列表 -->
                <el-form :model="portDataForm" status-icon ref="portDataForm"  class="demo-dynamic demo-form-inline">
                    <ol>
                        <li>端口</li>
                        <li>协议</li>
                        <li>外部访问</li>
                        <li>映射端口</li>
                        <li>指定端口</li>
                        <li>映射域名</li>
                        <li>指定域名</li>
                        <li>操作</li>
                    </ol>
                    <ul  class="liPort">
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                                :prop="'portDatas.' + index + '.port'"
                                :rules="[
                                    { required: true,  trigger: 'blur', validator: validatePort},
                                    { pattern: /^\+?[1-9][0-9]*$/, message: '非法端口' }
                                ]"
                            >
                                <!-- 端口配置.端口.input -->
                                <el-input v-model="portDatas.port" :maxlength="6"></el-input>
                                </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                            >
                                <!-- 端口配置.协议 -->
                                <el-select v-model="portDatas.protocol" placeholder="HTTP">
                                    <el-option label="HTTP" value="http"></el-option>
                                    <el-option label="TCP" value="tcp"></el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                            >
                                <!-- 端口配置.外部访问 -->
                                <el-switch  v-model="portDatas.visible"  active-text=""  inactive-text=""></el-switch>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                            >
                                <!-- 端口配置.映射服务端口 -->
                                <el-select v-model="portDatas.portType" placeholder="动态生成" v-show="portDatas.protocol == 'tcp'" :disabled="!portDatas.visible">
                                    <el-option label="动态生成" value="dynamic"></el-option>
                                    <el-option label="指定端口" value="appoint"></el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                                :prop="'portDatas.' + index + '.nodePort'"
                                :rules="[
                                    { required: true,  trigger: 'blur', validator: validateNodePort},
                                ]"
                            >
                                <!-- 端口配置.指定端口.input -->
                                <el-tooltip class="item" effect="dark" content="指定端口范围: 5000-32767" placement="top-start">
                                    <el-input :disabled="!portDatas.visible" size="mini" v-model="portDatas.nodePort" controls-position="right" v-show="portDatas.portType == 'appoint' ? true: false && portDatas.protocol == 'tcp' && portDatas.visible " :min="5000" :max="32767" :maxlength="5"></el-input>
                                </el-tooltip>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                            >
                                <!-- 端口配置.映射服务域名 -->
                                <el-select v-model="portDatas.domainNameType" placeholder="动态生成" v-show="portDatas.protocol == 'http'" :disabled="!portDatas.visible">
                                    <el-option label="动态生成" value="dynamic"></el-option>
                                    <el-option label="指定域名" value="appoint"></el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item
                                v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"
                                :prop="'portDatas.' + index + '.domainName'"
                                :rules="[
                                    { required: true,  trigger: 'blur', validator: validateDomainName},
                                ]"
                            >
                                <!-- 端口配置.指定域名配置.input -->
                                <el-input :disabled="!portDatas.visible" size="mini" v-model="portDatas.domainName" controls-position="right" v-show="portDatas.domainNameType == 'appoint' ? true: false && portDatas.protocol == 'http' && portDatas.visible" :maxlength="120"></el-input>
                            </el-form-item>

                        </li>
                        <li>
                            <el-form-item  v-for="(portDatas, index) in portDataForm.portDatas"
                                :key="portDatas.id"

                            >
                                <!-- 环境变量.操作.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="deletePortTableRow(portDatas)"></el-button>
                            </el-form-item>
                        </li>
                    </ul>
                    <!-- 添加端口-->
                    <el-form-item>
                        <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="small"  round @click="addPortTableRow">添加端口</el-button>
                    </el-form-item>
                </el-form>
                <!-- 添加的端口 -->
                <!-- <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="small" @click="addPortTableRow(portData)" round>添加端口</el-button> -->
            </el-collapse-item>
            <!-- 端口管理.end -->

            <!-- 环境变量.start -->
            <el-collapse-item name="5">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">环境变量</span><span style="margin-left:4%;">服务镜像环境变量管理</span>
                </template>
                <!-- 环境变量的表单 -->
                <el-form :model="envDataForm" status-icon ref="envDataForm"  class="demo-dynamic demo-form-inline">
                    <ol>
                        <li>键</li><li>值 <li>操作 </li>
                    </ol>
                    <ul>
                        <li>
                            <!-- <el-form-item
                                v-for="(envDatas, index) in envDataForm.envDatas"
                                :key="envDatas.id"
                                :prop="'envDatas.' + index + '.envKey'"
                                :rules="[
                                    { required: true, message: '键不能为空', trigger: 'blur' },
                                    { pattern: /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/, message: '字母开头，允许4-16字节，允许字母数字下划线' }
                                ]"
                            > -->
                            <el-form-item
                                v-for="(envDatas, index) in envDataForm.envDatas"
                                :key="envDatas.id"
                                :prop="'envDatas.' + index + '.envKey'"
                                :rules="[
                                    { required: true,  trigger: 'blur', validator: validateEnvKey}
                                    //,
                                    //{ pattern: /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/, message: '字母开头，允许4-16字节，允许字母数字下划线' }
                                ]"
                            >

                                <!-- 环境变量.键.input -->
                                <el-input v-model="envDatas.envKey"></el-input>
                            </el-form-item>

                        </li>
                        <li>
                            <el-form-item
                                v-for="(envDatas, index) in envDataForm.envDatas"
                                :key="envDatas.id"
                                :prop="'envDatas.' + index + '.envValue'"
                                :rules="[
                                    { required: true, message: '值不能为空', trigger: 'blur' }
                                ]"
                            >
                                <!-- 环境变量.值.input -->
                                <el-input v-model="envDatas.envValue"></el-input>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item  v-for="(envDatas, index) in envDataForm.envDatas"
                                :key="envDatas.id"

                            >
                                <!-- 环境变量.操作.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="removeEnvDataFormRow(envDatas)"></el-button>
                            </el-form-item>
                        </li>
                    </ul>
                    <!-- 添加环境变量-->
                    <el-form-item>
                        <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="small"  round @click="addEnvDataFormRow">添加环境变量</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <!-- 环境变量.end -->

            <!-- 配置管理.start -->
            <el-collapse-item v-show="showConfigMapCollapseItem" name="6">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">配置管理</span><span style="margin-left:4%;">添加服务需要用到的配置文件</span>
                </template>
                <!-- 配置管理数据表格列表 -->
                <!-- <el-table :data="configMapData"  style="width: 100%">
                    <el-table-column  prop="mouthPath"  label="挂载目录" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.mouthPath" class="portW" placeholder="挂载目录，例如：/App"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="configGroup"  label="配置组" >
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.configGroup" placeholder="请选择配置组" class="portW" >
                                <el-option v-for="item in configMapArr" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="configFiles"  label="配置文件" >
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.configFiles" multiple  class="portW" >
                                <el-option v-for="item in configFilesArr" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="operation"  label="操作" >
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, configMapData)" icon="el-icon-delete" type="danger" size="mini"></el-button>
                        </template>
                    </el-table-column>
                </el-table> -->
                <!-- 配置管理的表单 -->
                <el-form :model="configMapDataForm" status-icon ref="configMapDataForm"class="demo-dynamic demo-form-inline">
                    <ol class="config">
                        <li>挂载目录</li><li>配置组<li>配置文件</li><li>操作</li>
                    </ol>
                    <ul class="manageForm">
                        <li>
                            <el-form-item
                                v-for="(configVolumesDatas, index) in configMapDataForm.configVolumesDatas"
                                :key="configVolumesDatas.id"
                                :prop="'configVolumesDatas.' + index + '.mouthPath'"
                                :rules="[
                                    { required: true, trigger: 'blur' , validator: validateConfigMapMouthPath },
                                    { pattern:  /(^\/([0-9a-zA-Z]+))+/, message: '请输入正确的目录路径' }
                                ]"
                            >
                                <!-- 配置管理.挂载目录.input -->
                                <el-input v-model="configVolumesDatas.mouthPath"></el-input>
                            </el-form-item>

                        </li>
                        <li>
                            <el-form-item
                                v-for="(configVolumesDatas, index) in configMapDataForm.configVolumesDatas"
                                :key="configVolumesDatas.id"
                                :prop="'configVolumesDatas.' + index + '.configGroup'"
                                :rules="[
                                    { required: true, trigger: 'blur' , validator: validateConfigMap }
                                ]"
                            >
                                <!-- 配置管理.配置组.select -->
                                <el-select v-model="configVolumesDatas.configGroup" @change="changeConfigGroupValue(index)" @visible-change="visibleChangeConfigGroup"   placeholder="配置组">
                                    <el-option v-for="item in configMapArr" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                            <li>
                            <el-form-item class="configuration"
                                v-for="(configVolumesDatas, index) in configMapDataForm.configVolumesDatas"
                                :key="configVolumesDatas.id"
                                :prop="'configVolumesDatas.' + index + '.configFiles'"
                                :rules="[
                                    { required: true, trigger: 'blur' , validator: validateConfigFiles }
                                ]"
                            >
                                <!-- 配置管理.配置文件.select -->
                                <el-select v-model="configVolumesDatas.configFiles"  v-show="configVolumesDatas.configGroup != '' " collapse-tags  multiple placeholder="配置文件" style="width:240px;">
                                    <el-option v-for="item in configVolumesDatas.configFilesArr" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                                <i v-show="configVolumesDatas.configGroup == '' ">请先选择配置组</i>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item  v-for="(configVolumesDatas, index) in configMapDataForm.configVolumesDatas"
                                :key="configVolumesDatas.id"

                            >
                                <!-- 配置管理.操作.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="removeConfigMapDataFormRow(configVolumesDatas)"></el-button>
                            </el-form-item>
                        </li>
                    </ul>
                <el-form-item>
                    <!-- 动态添加配置管理table行的按钮 -->
                    <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="small"  round @click="addConfigMapDataFormRow">添加目录</el-button>
                </el-form-item>

                </el-form>
            </el-collapse-item>
            <!-- 配置管理.end -->

            <!-- 持久化卷.start -->
            <el-collapse-item v-show="showPVCCollapseItem" name="7">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">持久化卷</span><span style="margin-left:4%;">将服务卷数据持久化</span>
                </template>

                <!-- 有状态类型下表单 -->
                <el-form :model="statefulSetPVCDataForm" status-icon ref="statefulSetPVCDataForm" v-show="showStatefulSetPVCTable" class="demo-dynamic demo-form-inline">
                    <ol>
                        <li>挂载目录</li><li>容量</li><li>操作</li>
                    </ol>
                    <ul>
                        <li>
                            <el-form-item
                                v-for="(statefulSetPVCDatas, index) in statefulSetPVCDataForm.statefulSetPVCDatas"
                                :key="statefulSetPVCDatas.id"
                                :prop="'statefulSetPVCDatas.' + index + '.mouthPath'"
                                :rules="[
                                    { required: true, trigger: 'blur', validator: validateStatefulSetMouthPath },
                                    { pattern:  /(^\/([0-9a-zA-Z]+))+/, message: '请输入正确的目录路径' }
                                ]"
                            >
                                <!-- 持久化卷.有状态.挂载目录.input -->
                                <el-input v-model="statefulSetPVCDatas.mouthPath"></el-input>
                            </el-form-item>

                        </li>
                        <li>
                            <el-form-item
                                v-for="(statefulSetPVCDatas, index) in statefulSetPVCDataForm.statefulSetPVCDatas"
                                :key="statefulSetPVCDatas.id"
                                :prop="'statefulSetPVCDatas.' + index + '.capacity'"
                                :rules="[
                                    { required: true, message: '容量不能为空', trigger: 'blur' }
                                ]"
                            >
                                <!-- 持久化卷.有状态.容量.input -->
                                <el-input v-model="statefulSetPVCDatas.capacity"></el-input><span class="unit">M</span>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item  v-for="(statefulSetPVCDatas, index) in statefulSetPVCDataForm.statefulSetPVCDatas"
                                :key="statefulSetPVCDatas.id"

                            >
                                <!-- 持久化卷.有状态.操作.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="removeStatefulSetPVCDataFormRow(statefulSetPVCDatas)"></el-button>
                            </el-form-item>
                        </li>
                    </ul>
                    <el-form-item>
                        <!-- 有状态部署类型,添加的目录 -->
                        <el-button class="filter-item addkeys" icon="el-icon-plus" type="success" size="small"  round @click="addStatefulSetPVCDataFormRow">添加目录</el-button>
                    </el-form-item>
                </el-form>


                <!-- 无状态类型下表单 -->
                <el-form :model="deploymentPVCDataForm" status-icon ref="deploymentPVCDataForm" v-show="showDeploymentPVCTable" class="demo-dynamic demo-form-inline">
                    <ol>
                        <li>挂载目录</li><li>选择存储卷</li><li>操作</li>
                    </ol>
                    <ul>
                        <li>
                            <el-form-item
                                v-for="(deploymentPVCDatas, index) in deploymentPVCDataForm.deploymentPVCDatas"
                                :key="deploymentPVCDatas.id"
                                :prop="'deploymentPVCDatas.' + index + '.mouthPath'"
                                :rules="[
                                    { required: true,  trigger: 'blur' , validator: validateDeploymentMouthPath},
                                    { pattern:  /(^\/([0-9a-zA-Z]+))+/, message: '请输入正确的目录路径' }
                                ]"
                            >
                                <!-- 持久化卷.无状态.挂载目录.input -->
                                <el-input v-model="deploymentPVCDatas.mouthPath"></el-input>
                            </el-form-item>
                        </li>
                            <li>
                            <el-form-item class="configuration"
                                v-for="(deploymentPVCDatas, index) in deploymentPVCDataForm.deploymentPVCDatas"
                                :key="deploymentPVCDatas.id"
                                :prop="'deploymentPVCDatas.' + index + '.pvc'"
                                :rules="[
                                    { required: true, message: '挂载目录不能为空', trigger: 'blur' }
                                ]"
                            >
                            <!-- 持久化卷.无状态.选择存储目录.select -->
                            <el-select v-model="deploymentPVCDatas.pvc" placeholder="存储卷" @visible-change="visibleChangeDeploymentPVC" style="width:240px;">
                                    <el-option v-for="item in deploymentPVCArr" :key="item.name" :label="item.name" :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </li>
                        <li>
                            <el-form-item  v-for="(deploymentPVCDatas, index) in deploymentPVCDataForm.deploymentPVCDatas"
                                :key="deploymentPVCDatas.id"
                            >
                                <!-- 持久化卷.无状态.删除按钮 -->
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click.prevent="removeDeploymentPVCDataFormRow(deploymentPVCDatas)"></el-button>
                                <el-tooltip class="item" effect="dark" content="申请一个存储卷,一个存储卷只能给一个挂载目录使用" placement="top-start">
                                    <el-button icon="el-icon-plus" type="primary" size="mini" @click.prevent="createStorage" ></el-button>
                                </el-tooltip>

                            </el-form-item>
                        </li>
                    </ul>
                <el-form-item>
                    <!-- 无状态部署类型,添加的目录 -->
                    <el-button v-show="showAddDeploymentTableRowButton" class="filter-item addkeys" icon="el-icon-plus" type="success" size="small"  round @click="addDeploymentPVCDataFormRow">添加目录</el-button>
                </el-form-item>


                </el-form>
            </el-collapse-item>
            <!-- 持久化卷.end -->

            <!-- 高可用.start -->
            <el-collapse-item name="8">
                <template slot="title">
                    <div class="line"></div>
                    <span class="Title">高可用</span><span style="margin-left:4%;">设置重启检查项目，如遇到检查项不满足，为自动保证服务高可用，将自动重启该服务</span>
                </template>
                <el-form :model="imageHighAvailabilityForm" status-icon ref="imageHighAvailabilityForm"  :rules="imageHighAvailabilityRules" label-width="100px">
                    <el-form-item >
                        <el-radio-group v-model="imageHighAvailabilityForm.type" @change="changeImageHAType">
                            <el-radio :label="1">无</el-radio>
                            <el-radio :label="2">HTTP</el-radio>
                            <el-radio :label="3">TCP</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="端口" prop="port" v-show="showImageHAPort">
                            <el-input :maxlength="6" name="port" v-model="imageHighAvailabilityForm.port" placeholder="22" style="width:30%"></el-input>
                    </el-form-item>
                    <el-form-item label="首次检查延迟" prop="initialDelaySeconds" v-show="showImageHAinitialDelaySeconds">
                            <el-input :maxlength="4" v-model="imageHighAvailabilityForm.initialDelaySeconds"  style="width:30%"></el-input><span class="time">s</span>
                    </el-form-item>
                    <el-form-item label="检查超时" prop="timeoutSeconds" v-show="showImageHATimeoutSeconds">
                            <el-input :maxlength="4" v-model="imageHighAvailabilityForm.timeoutSeconds"  style="width:30%"></el-input><span class="time">s</span>
                    </el-form-item>
                    <el-form-item label="检查间隔" prop="periodSeconds" v-show="showImageHAPeriodSeconds">
                            <el-input :maxlength="4" v-model="imageHighAvailabilityForm.periodSeconds"  style="width:30%"></el-input><span class="time">s</span>
                    </el-form-item>
                    <el-form-item label="接口路径" prop="path" v-show="showImageHAPath">
                            <el-input :maxlength="200" v-model="imageHighAvailabilityForm.path"  style="width:30%"></el-input>
                    </el-form-item>
                </el-form>

            </el-collapse-item>
            <!-- 高可用.end -->

        </el-collapse>
        <!-- 折叠面板,关于选择镜像的一些参数设置.end -->

        <!-- 选择镜像弹出对话框.start -->
        <el-dialog title="选择镜像" :visible.sync="selectImageFormVisible" :close-on-click-modal="false">
            选择镜像:
            <el-radio-group v-model="selectImageSoreType" @change="getProjectImages" size="small">
                <el-radio-button label="private" round>私有</el-radio-button>
                <!-- <el-radio-button label="public" round>公有</el-radio-button> -->
                <el-radio-button label="store" round>商店</el-radio-button>
            </el-radio-group>
            <span style="width:30%;position:absolute;margin-left:20px;">
                <el-input v-model="queryImageKey"  placeholder="输入搜索关键字" size="small" @click="getProjectImages"  suffix-icon="el-icon-search"></el-input>
            </span>
            <!-- 数据表格列表 -->
            <el-table :data="imageDialogData" v-loading="loadingImageTable"  border  style="width: 100%;margin-top:10px;">
                <el-table-column  prop="name"  label="镜像名称" >
                </el-table-column>
                <el-table-column  prop="creation_time"  label="创建时间" >
                </el-table-column>
                <el-table-column  prop="operation"  label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-d-arrow-right" @click="selectedImageFromDailog(scope.$index, scope.row)" size="mini">部署</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>
        <!-- 选择镜像弹出对话框.end -->

        <!-- 创建无状态应用的时候.新增加一个pvc卷.start -->
        <el-dialog title="创建存储卷" :visible.sync="storageVisible" :close-on-click-modal="true">
            <el-form label-width="80px" class="form-top">
                <el-form ref="f1" :model="form1" :rules="rules1" :inline="true" class="form-top">
                    <el-form-item label="名称" prop="pvcName">
                        <el-input v-model="form1.pvcName" style="width:240px" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="访问模式">
                        <el-select v-model="selectAccessMode" placeholder="请选择访问模式">
                            <el-option v-for="item in accessMode" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                         </el-select>
                     </el-form-item>
                </el-form>

                <el-form :inline="true" class="form-top">
                    <el-form-item label="大小">
                        <el-slider size="mini" style="width:400px" :min="min" :max="max" v-model="selectSize" show-input>
                        </el-slider>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group @change="unitChange" v-model="unitSelect" size="small">
                            <el-radio-button label="MB"></el-radio-button>
                                <el-radio-button label="GB"></el-radio-button>
                            </el-radio-group>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="selectType" size="mini">
                            <el-radio-button label="nfs"></el-radio-button>
                            </el-radio-group>
                    </el-form-item>
                </el-form>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="storageVisible=false">取消</el-button>
                <el-button @click="createStorageCommit" type="primary">确定</el-button>
            </div>
        </el-dialog>
        <!-- 创建无状态应用的时候.新增加一个pvc卷.end -->

        <!-- 查看镜像版本明细.start -->
        <el-dialog title="镜像版本明细" :visible.sync="imageVersionDescribedDialog" :close-on-click-modal="false">
            <el-form status-icon :model="imageVersionDescrebedForm" ref="imageVersionDescrebedForm" >
                <el-form-item label="镜像" :label-width="imageVersionDescrebedFormLabelWidth"  prop="image">
                    <el-input type="text" v-model="imageVersionDescrebedForm.image" :disabled="true" ></el-input>
                </el-form-item>

                <el-form-item label="版本" :label-width="imageVersionDescrebedFormLabelWidth" prop="version">
                    <el-input  type="text" v-model="imageVersionDescrebedForm.version" :disabled="true" ></el-input>
                </el-form-item>

                <el-form-item label="说明" :label-width="imageVersionDescrebedFormLabelWidth"  prop="described">
                    <el-input  type="textarea" v-model="imageVersionDescrebedForm.described" ></el-input>
                </el-form-item>
            </el-form>

        </el-dialog>
        <!-- 查看镜像版本明细.end -->

        <!-- 提交按钮.start -->
        <el-form class="BtnR">
            <el-form-item>
            <el-button class="iconfont icon-fanhui" v-show="showCancelButton" @click="back">取消</el-button>
            <el-button class="iconfont icon-fuxuan" type="primary" @click="deployApp">确定</el-button>
            </el-form-item>
        </el-form>
        <!-- 提交按钮.end -->
    </div>
</template>

<script>
import { validateNameInk8s, validateNumber ,validateDomainName} from "@/utils/validate";
import { appManagement } from '@/utils/appManagement'; // 应用管理工具类

export default {
    data() {
        // 校验应用基本设置.start
        // 应用名称
        const validateAppName = (rule, value, callback) => {
            //value = this.appBaseInputForm.appName;
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入应用名称"));
            } else if (value.length == 0) {
                callback(new Error("请输入应用名称"));
            } else {
                // 部署镜像的时候,验证应用名称是否重复
                if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                    let param = {
                        appName: value
                    };
                    // 后台验证
                    this.httpClient
                    .httpClientget(
                        this.projectConfig.URL_API_APP_MANAGE_APP_NAME ,
                        param
                    )
                    .then(res => {
                        const code = res.data;
                        if (code == this.projectConfig.CODE_OK) {
                            callback(new Error("应用名称已经存在"));
                        } else {
                            callback();
                        }
                    });
                } else {
                    callback();
                }

            }
        };

        // 应用名称(k8s)
        const validateAppNameKube = (rule, value, callback) => {
            //value = this.appBaseInputForm.appNameKube;
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入应用名称(k8s)"));
            } else if (value.length == 0) {
                callback(new Error("请输入应用名称(k8s)"));
            } else {
                if (!validateNameInk8s(value)) {
                    callback(new Error("以[a~z]开头，允许[0~9]、[-]，长度大于4，且以小写英文和数字结尾"));
                } else {
                    // 如果是部署应用,要校验应用名称

                    if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                        // 后台验证
                        this.httpClient
                        .httpClientget(
                            this.projectConfig.URL_API_APP_MANAGE_APP_NAME_KUBE + "/" + value,
                            ""
                        )
                        .then(res => {
                            const code = res.data;
                            if (code == this.projectConfig.CODE_OK) {
                                callback(new Error("应用名称已经存在"));
                            } else {
                                callback();
                            }
                        });
                    } else {
                        callback();
                    }
                }
            }
        };

        // 镜像名称
        const validateImageName = (rule, value, callback) => {
            //value = this.appBaseInputForm.image;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入镜像名称"));
            } else if (value.length == 0) {
                callback(new Error("请输入镜像名称"));
            } else {
                callback();
            }
        };

        // 镜像版本
        const validateImageVersion = (rule, value, callback) => {
            //value = this.appBaseInputForm.imageVersion;
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("请选择镜像版本"));
            } else if (value.length == 0) {
                callback(new Error("请选择镜像版本"));
            } else {
                callback();
            }
        };

        // 应用描述
        const validateDescribed = (rule, value, callback) => {
            //value = this.appBaseInputForm.described;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入应用描述"));
            } else if (value.length == 0) {
                callback(new Error("请输入应用描述"));
            } else {
                callback();
            }
        };

        // 镜像启动命令
        const validateCommand = (rule, value, callback) => {
            const commandType = this.appBaseInputForm.startCommand;
            if (commandType == 2 && value.length <= 0) {
                callback(new Error('请输入启动命令'));
            } else {
                callback();
            }
        };

        // 校验应用基本设置.end

        // 高可用.表单校验.start

        // 端口
        const validateHAPort = (rule, value, callback) => {
            //value = this.imageHighAvailabilityForm.port;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入端口号"));
            } else if (value.length == 0) {
                callback(new Error("请输入端口号"));
            } else {
                // 非0,不是0开头
                if (!validateNumber(value)) {
                    callback(new Error("非法参数"));
                } else {
                callback();
                }
            }
        };

        // 首次检查延迟
        const validateInitialDelaySeconds = (rule, value, callback) => {
            //value = this.imageHighAvailabilityForm.initialDelaySeconds;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入首次延迟设置"));
            } else if (value.length == 0) {
                callback(new Error("请输入首次延迟设置"));
            } else {
                // 非0,不是0开头
                if (!validateNumber(value)) {
                    callback(new Error("非法参数"));
                } else {
                    callback();
                }
            }
        };

        // 检查超时
        const validateTimeoutSeconds = (rule, value, callback) => {
            //value = this.imageHighAvailabilityForm.timeoutSeconds;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入检查超时设置"));
            } else if (value.length == 0) {
                callback(new Error("请输入检查超时设置"));
            } else {
                // 非0,不是0开头
                if (!validateNumber(value)) {
                    callback(new Error("非法参数"));
                } else {
                    callback();
                }
            }
        };

        // 检查间隔
        const validatePeriodSeconds = (rule, value, callback) => {
            //value = this.imageHighAvailabilityForm.periodSeconds;
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入检查间隔设置"));
            } else if (value.length == 0) {
                callback(new Error("请输入检查间隔设置"));
            } else {
                // 非0,不是0开头
                if (!validateNumber(value)) {
                    callback(new Error("非法参数"));
                } else {
                    callback();
                }
            }
        };

        // 接口路径
        const validatePath = (rule, value, callback) => {
            if (this.imageHighAvailabilityForm.type == 1 || this.imageHighAvailabilityForm.type == 3) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入接口路径"));
            } else if (value.length == 0) {
                callback(new Error("请输入接口路径"));
            } else {
                callback();
            }
        };

        // 高可用.表单校验.end

        // 端口检验.start
        const validatePort = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入端口"));
            } else if (value.length == 0) {
                callback(new Error("请输入端口"));
            } else {
                // 是否重复
                const portdata = this.portDataForm.portDatas;
                const pns = [];
                portdata.forEach(function(element) {
                    if (element.port == value) {
                        pns.push(element.port);
                    }
                }, this);
                if (pns.length >= 2) {
                    callback(new Error("端口,重复,请重新输入"));
                } else {
                    callback();
                }

            }
        };

        // 端口.指定端口校验
        const validateNodePort = (rule, value, callback) => {
            // 得到序号
            const _index = rule.field.split('.')[1];
            // 拿到对象
            const _element = this.portDataForm.portDatas[_index];


            if (_element.protocol == 'tcp' && _element.visible && _element.portType == 'appoint') {
                // 校验是否重复
                if (typeof value == "undefined" || value == null) {
                    callback(new Error("端口不能为空"));
                } else if (value.length == 0) {
                    callback(new Error("端口不能为空"));
                } else {
                    let reg = /^\+?[1-9][0-9]*$/;
                    if (!reg.test(value)) {
                        callback(new Error("非法端口"));
                    } else if (value < 5000 || value > 32767) {
                        callback(new Error("端口范围: 5000-32767"));
                    } else {
                        // 端口是否重复
                        const nodePortdata = this.portDataForm.portDatas;
                        const pns = [];
                        const http_pns = [];
                        nodePortdata.forEach(function(element) {
                            // tcp 情况下,端口校验,不能重复
                            if (element.nodePort == value && element.visible  && element.portType == 'appoint' && element.protocol == 'tcp') {
                                pns.push(element);
                            }
                        }, this);
                        // 校验
                        if (pns.length >= 2) {
                            callback(new Error("端口,重复,请重新输入"));
                        } else {
                            // 后台校验端口,判断指定端口是否被使用
                            this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_APP_SERVICE_NODE_PORT + '/' + value ,'').then(res => {
                                let code = res.data;
                                if (code == this.projectConfig.CODE_OK) {
                                    // 重复
                                    callback(new Error("端口,已经被使用,请重新输入"));
                                } else {
                                    callback();
                                }
                            })

                        }
                    }
                }
            } else {
                callback();
            }

            // if (_element.protocol == 'http') {
            //     callback();
            // } else if(_element.protocol == 'tcp' && !_element.visible) {
            //     callback();
            // } else if(_element.protocol == 'tcp' && _element.visible && _element.portType == 'appoint'){
            //     // 校验是否重复
            //     if (typeof value == "undefined" || value == null) {
            //         callback(new Error("端口不能为空"));
            //     } else if (value.length == 0) {
            //         callback(new Error("端口不能为空"));
            //     } else {
            //         let reg = /^\+?[1-9][0-9]*$/;
            //         if (!reg.test(value)) {
            //             callback(new Error("非法端口"));
            //         } else {
            //             // 端口是否重复
            //             const nodePortdata = this.portDataForm.portDatas;
            //             const pns = [];
            //             const http_pns = [];
            //             nodePortdata.forEach(function(element) {
            //                 // tcp 情况下,端口校验,不能重复
            //                 if (element.nodePort == value && element.visible  && element.portType == 'appoint' && element.protocol == 'tcp') {
            //                     pns.push(element);
            //                 }
            //             }, this);
            //             // 校验
            //             if (pns.length >= 2) {
            //                 callback(new Error("端口,重复,请重新输入"));
            //             } else {
            //                 callback();
            //             }
            //         }
            //     }
            // } else {
            //     callback();
            // }


        };

        // 端口.域名校验
        const validateDomainName = (rule, value, callback) => {
            // 得到序号
            const _index = rule.field.split('.')[1];
            // 拿到对象
            const _element = this.portDataForm.portDatas[_index];

            if (_element.protocol == 'http' && _element.visible && _element.domainNameType == 'appoint') {
                let reg = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*/;
                // 校验是否重复
                if (typeof value == "undefined" || value == null) {
                    callback(new Error("域名不能为空"));
                } else if (value.length == 0) {
                    callback(new Error("域名不能为空"));
                } else if (!reg.test(value)) {
                    callback(new Error("非法域名: e.g. example.com"));
                } else {
                    // 校验重复
                    if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                        const _param = {
                            domainName: value
                        };
                        // 后台验证
                        this.httpClient
                        .httpClientget(
                            this.projectConfig.URL_API_APP_MANAGE_DOMAIN_NAME ,
                            _param
                        )
                        .then(res => {
                            const code = res.data;
                            if (code == this.projectConfig.CODE_OK) {
                                callback(new Error("域名已经存在"));
                            } else {
                                callback();
                            }
                        });
                    } else {
                        callback();
                    }
                }
            } else {
                 callback();
            }

        };

        // 端口检验.end

        // 环境变量.表单.检验.start

        // 检查环境变量: 键
        const validateEnvKey = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("请输入环境变量键"));
            } else if (value.length == 0) {
                callback(new Error("请输入环境变量键"));
            } else {
                // 是否重复
                const d = this.envDataForm.envDatas;
                const pns = [];
                d.forEach(function(element) {
                    if (element.envKey == value) {
                        pns.push(element.envKey);
                    }
                }, this);
                if (pns.length >= 2) {
                    callback(new Error("键值,重复,请重新输入"));
                } else {
                    callback();
                }

            }
        };


        // 环境变量.表单.检验.end

        // 配置管理.表单.校验.start
        // 配置文件挂载目录的检验
        const validateConfigMapMouthPath = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("挂载目录不能为空"));
            } else if (value.length == 0) {
                callback(new Error("挂载目录不能为空"));
            } else {
                // 是否重复
                let configvolumesdata = this.configMapDataForm.configVolumesDatas;
                let pns = [];
                configvolumesdata.forEach(function(element) {
                    if (element.mouthPath == value) {
                        pns.push(element.mouthPath);
                    }
                }, this);
                if (pns.length >= 2) {
                    callback(new Error("挂载目录,重复,请重新输入"));
                } else {
                    callback();
                }

            }
        };

        // 配置管理.配置组检验
        const validateConfigMap = (rule, value, callback) => {
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("配置组不能为空"));
            } else if (value.length == 0) {
                callback(new Error("配置组不能为空"));
            } else {
                callback();
            }
        };


        // 配置管理.配置文件检验
        const validateConfigFiles = (rule, value, callback) => {
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                callback();
            } else if (typeof value == "undefined" || value == null) {
                callback(new Error("挂载目录不能为空"));
            } else if (value.length == 0) {
                callback(new Error("挂载目录不能为空"));
            } else {
                // 是否重复
                callback();
            }
        };




        // 配置管理.表单.校验.end

        // 持久化卷.表单,校验.start
        const validateStatefulSetMouthPath = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("挂载目录不能为空"));
            } else if (value.length == 0) {
                callback(new Error("挂载目录不能为空"));
            } else {
                // 是否重复
                let statevolumesdata = this.statefulSetPVCDataForm.statefulSetPVCDatas;
                let pns = [];
                statevolumesdata.forEach(function(element) {
                    if (element.mouthPath == value) {
                        pns.push(element.mouthPath);
                    }
                }, this);
                if (pns.length >= 2) {
                    callback(new Error("挂载目录,重复,请重新输入"));
                } else {
                    callback();
                }

            }
        };
        const validateDeploymentMouthPath = (rule, value, callback) => {
            if (typeof value == "undefined" || value == null) {
                callback(new Error("挂载目录不能为空"));
            } else if (value.length == 0) {
                callback(new Error("挂载目录不能为空"));
            } else {
                // 是否重复
                let deploymentVolumesdata = this.deploymentPVCDataForm.deploymentPVCDatas;
                let pns = [];
                deploymentVolumesdata.forEach(function(element) {
                    if (element.mouthPath == value) {
                        pns.push(element.mouthPath);
                    }
                }, this);
                if (pns.length >= 2) {
                    callback(new Error("挂载目录,重复,请重新输入"));
                } else {
                    callback();
                }

            }
        };
        // 持久化卷.表单,校验.end


        // 新增pvc卷.表单校验.start
        const validatePvcName = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入名称'));
            } else {
                let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM_VALIDATE;
                url += "?namespace=" + namespace + "&pvcName=" + value;
                this.httpClient.httpClientget(url).then((response) => {
                    let data = response.data;
                    if (data) {
                        callback(new Error('存储名称已经存在,请输入其他名称!'));
                    } else {
                        callback();
                    }
                });
            }
        };
        // 新增pvc卷.表单校验.end



        return {
            // 页面数据实体
            imageDataBean: {
                namespace: '',
                imageBase: {},
                imagePortList: [],
                imageEnvList: [],
                imageConfigVolumesList: [],
                imageStatefulSetPVCList: [],
                imageDeploymentPVCList: [],
                imageHA:{},
                commandArgs: []

            },
            // 是否显示/隐藏,选择镜像的按钮
            showSelectImageButton: true,

            // 打开第一个折叠版
            activeNames: ["1"],
            // 应用基本输入表单
            appBaseInputForm: {
                id: '',
                appName: "", // 应用名称
                appNameKube: "", // 应用名称(k8s)
                image: "", // 镜像
                imageVersion: "", // 镜像版本
                described: "", // 描述
                appKind: "Deployment", // 部署方式: 无状态,有状态
                replicas: 1, // 部署实例个数
                requestsMemory: "126Mi", // 应用请求内存
                limitsMemory: "512Mi", // 应用最大使用的内存
                startCommand: 1, // 启动命令
                command: "", // 命令
                imagePullPolicy: "Always", // 拉取镜像的方式
                limitsCPU: '512m'

            },
            // 是否显示应用名称输入框
            showAppNameInput: true,
            showAppNameKubeInput: true,
            // 是否显示镜像版本下拉选择框
            showImageversionSelect: true,
            // 镜像启动命令携带的参数表单
            commandArgsForm: {
                commandArgs: []
            },
            // 镜像版本数组
            imageVersionArr: [],
            // 应用基本输入表单检验规则
            appBaseInputFormRules: {
                appName: [
                    { required: true, trigger: "blur", validator: validateAppName }
                ],
                appNameKube: [
                    { required: true, trigger: "blur", validator: validateAppNameKube }
                ],
                image: [
                    { required: true, trigger: "blur", validator: validateImageName }
                ],
                imageVersion: [
                    { required: true, trigger: "blur", validator: validateImageVersion }
                ],
                described: [
                    { required: true, trigger: "blur", validator: validateDescribed }
                ]
            },
            // 显示/隐藏自定义输入命令的输入框
            disableStartCommandInput: true,
            /////////////////////端口配置////////////////////
            // 端口数据
            portData: [],

            // 端口表单
            portDataForm: {
                portDatas: []
            },
            // 端口检验
            validateNodePort: validateNodePort,
            validatePort: validatePort,
            validateDomainName: validateDomainName,
            ///////////////环境变量配置///////////////////////
            // 环境变量form 表单数据
            envDataForm: {
                envDatas: [],
            },
            // 环境变量键校验
            validateEnvKey: validateEnvKey,

            ///////////////配置管理////////////////////////////////
            // 是否显示配置管理折叠面板
            showConfigMapCollapseItem: true,
            // 配置管理数组
            ruleForm: {
                region: ""
            },

            configMapDataForm: {
                configVolumesDatas: []
            },
            // k8s 配置组数组
            configMapArr: [],
            // 配置文件
            configFilesArr: [],
            // 配置管理,挂载目校验
            validateConfigMapMouthPath: validateConfigMapMouthPath,
            // 配置管理,配置组校验
            validateConfigMap: validateConfigMap,
            // 配置管理,配置文件检验
            validateConfigFiles: validateConfigFiles,
            //////////////////持久化卷//////////////////
            // 是否显示/隐藏持久化卷折叠面板
            showPVCCollapseItem: true,
            // 部署有状态应用时from表单
            statefulSetPVCDataForm: {
                    statefulSetPVCDatas: []
            },
            pvcArr: ["A", "B"],
            // 无状态from表单
            deploymentPVCDataForm: {
                deploymentPVCDatas: []
            },
            // 点击服务类型单选按钮的时候,显示table
            showStatefulSetPVCTable: false,
            showDeploymentPVCTable: true,
            showAddStatefulSetTableRowButton: false,
            showAddDeploymentTableRowButton: true,
            // 无状态,pvc数组
            deploymentPVCArr: [],
            // 校验挂载目录
            validateDeploymentMouthPath: validateDeploymentMouthPath,
            validateStatefulSetMouthPath: validateStatefulSetMouthPath,
            ////////////////////高可用//////////////////////////
            // 高可用配置表单
            imageHighAvailabilityForm: {
                id: '',
                image: "",
                type: 1,
                port: 0,
                initialDelaySeconds: 0,
                periodSeconds: 0,
                timeoutSeconds: 0,
                path: ""
            },
            showImageHAPort: false,
            showImageHAinitialDelaySeconds: false,
            showImageHATimeoutSeconds: false,
            showImageHAPeriodSeconds: false,
            showImageHAPath: false,
            // 校验规则
            imageHighAvailabilityRules: {
                port: [
                    { required: true, trigger: 'blur', validator: validateHAPort }
                ],
                initialDelaySeconds: [
                    { required: true,trigger: "blur",validator: validateInitialDelaySeconds}
                ],
                timeoutSeconds: [
                    { required: true, trigger: "blur", validator: validateTimeoutSeconds }
                ],
                periodSeconds: [
                    { required: true, trigger: "blur", validator: validatePeriodSeconds }
                ],
                path: [
                    { required: true, trigger: "blur", validator: validatePath }
                ]
            },
            ////////////////选择镜像对话框/////////////////////////
            // 镜像类型
            selectImageSoreType: "private",
            // 查询关键字
            queryImageKey: "",
            // 镜像数组
            imageDialogData: [],
            // 选择镜像对话框界面是否显示
            selectImageFormVisible: false,
            // 加载镜像table
            loadingImageTable: false,

            ///////////////////////////////校验数据专用//////////////////////////////////////////
            // 校验镜像基础信息
            checkImageBase: true,
            // 校验端口
            checkImagePort: true,
            // 校验环境变量
            checkImageEnv: true,
            // 校验配置卷
            checkConfigMap: true,
            // 校验pvc卷
            checkPVCVolume: true,
            // 校验高可用
            checkHA: true,
            // 检验启动参数
            checkImageCommandArgs:true,
            // 是否显示取消按钮
            showCancelButton: true,
            /////////////////////////创建无状态应用的时候,新增一个pvc////////////////////////////////////////
            // pvc名称校验
            rules1: {
                pvcName: [
                    { validator: validatePvcName, trigger: 'blur' }
                ]
            },
            // 表单
            form1: {
                pvcName: '',
            },
            // 是否显示新增存储类的对话框
            storageVisible: false,
            // 存储类型
            selectType: 'nfs',
            // 申请存储大小
            selectSize: 0,
            min: 100,
            max: 1023,
            // 单位
            unitSelect: 'MB',
            // 读写模式
            selectAccessMode: 'ReadWriteMany',
            // 读写类型
            accessMode: [
                {
                    value: 'ReadWriteMany', label: '读写多点共享'
                },
                {
                    value: 'ReadOnlyMany', label: '只读多点共享'
                },
                {
                    value: 'ReadWriteOnce', label: '读写单点独享'
                }
            ],


            //////////////////////////////////镜像版本明细///////////////////////////////////////
            // 是否展示镜像版本明细按钮
            showImageVersionDescribedButton: false,
            // 是否禁用镜像版本明细按钮
            disabledImageVersionDescribedButton: true,
            // 镜像版本明细对话框
            imageVersionDescribedDialog: false,
            // 镜像版本明细表单
            imageVersionDescrebedForm: {
                image: '',
                version: '',
                described: '',
            },
            imageVersionDescrebedFormLabelWidth: '80px',
        };
    },
    created() {
        // 页面加载
        this.loadPage();
    },
    props: {
        pageAction: '', // 1:设置镜像参数(set_image);2:部署镜像(deploy_image)
        targetImageName: '', // 选择的镜像
        // backOffUrl: '', // 点击取消后退的url
        // forwardUrl: '', // 点击确定,前进的URL

    },
    methods: {
        // 页面加载
        loadPage() {
            // 先取出缓存中的镜像名称
            let imageNameOnDeploy = appManagement.getImageNameOnDeploy();
            let pageActionDeploy = appManagement.getPageAction();
            if (imageNameOnDeploy != '' && typeof imageNameOnDeploy != 'undefined' && imageNameOnDeploy != null
                    && pageActionDeploy == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                this.pageAction = this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE
                this.appBaseInputForm.image = appManagement.getImageNameOnDeploy();
            }

            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                // 设置镜像信息
                // 隐藏选择镜像的按钮
                this.showSelectImageButton = false;
                // 隐藏持久化卷折叠面板
                this.showPVCCollapseItem = false;
                // 隐藏配置管理折叠面板
                //this.showConfigMapCollapseItem = false;
                // 隐藏应用名称输入框
                this.showAppNameInput = false;
                this.showAppNameKubeInput = false;

                // 设置参数的时候,不需要设置应用名称,所以默认赋值
                //this.appBaseInputForm.appName = 'default';
                //this.appBaseInputForm.appNameKube = 'default';

                // 隐藏镜像版本下拉选择框
                this.showImageversionSelect = false;

                // 不显示取消按钮
                this.showCancelButton = false;



            } else if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE
                        || pageActionDeploy == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                // 部署镜像
                // 打开选择镜像的按钮
                this.showSelectImageButton = true;
                // 打开镜像版本明细查看按钮
                this.showImageVersionDescribedButton = true;
                // 打开配置管理折叠面板
                this.showConfigMapCollapseItem = true;
                // 打开持久化卷折叠面板
                this.showPVCCollapseItem = true;
                // 打开应用名称输入框
                this.showAppNameInput = true;
                this.showAppNameKubeInput = true;
                // 打开镜像版本下拉选择框
                this.showImageversionSelect = true;

                // 显示取消按钮
                this.showCancelButton = true;
            }

            // 设置当前选中的镜像名称
            if (this.targetImageName != '' && typeof this.targetImageName != undefined) {
                this.appBaseInputForm.image = this.targetImageName;
            }

            // 根据选择的镜像名称,获取镜像基本信息,填充页面元素
            this.getImageBase();


        },
        // 打开选择镜像对话框
        openSelectImageDialog() {
            this.selectImageFormVisible = true;
            // 加载镜像仓库中的数据
            this.getProjectImages();
        },
        // 选择启动命令单选按钮组事件
        changeStartCommand(val) {
            if (val == 1) {
                // 禁用命令输入框
                this.disableStartCommandInput = true;
            } else {
                // 打开命令输入框
                this.disableStartCommandInput = false;
            }
        },
        // 动态删除一行,table
        deletePortTableRow(item) {
            // index,dataList
            /* const id = dataList[index].id;
            if (id.length == 32) {
                this.$confirm('此操作将删除镜像端口参数, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除行
                    dataList.splice(index, 1);
                    // 删除数据库中的数据
                    this.deleteImageParam(id,'port');
                }).catch(() => {
                });
            } else {
                // 删除行
                dataList.splice(index, 1);
            } */
            var index = this.portDataForm.portDatas.indexOf(item);
            if (index !== -1) {
                const id = item.id;
                if (id.length == 32) {
                    this.$confirm('此操作将删除镜像端口参数, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 删除行
                        this.portDataForm.portDatas.splice(index, 1);
                        // 删除数据库中的数据
                        this.deleteImageParam(id,'port');
                    }).catch(() => {
                    });
                } else {
                    // 删除行
                    this.portDataForm.portDatas.splice(index, 1);
                }
            }

        },
        // 端口管理,添加一行
        addPortTableRow() {
            // 端口对象
            /* const imagePortObject = {
                id: '',
                port: "",
                protocol: "TCP",
                visible: false,
                portType: "dynamic",
                nodePort: ""
            };
            dataList.push(imagePortObject); */
            this.portDataForm.portDatas.push({
                id:  Date.now(),
                port: "",
                protocol: "tcp",
                visible: false,
                portType: "dynamic",
                nodePort: 8080,
                domainName: '*.demo.com',
                domainNameType: 'dynamic',
                serviceNameType: 'dynamic',
                serviceName: '',
            })
        },

        // 环境变量form数据,删除一行
        removeEnvDataFormRow(item) {
            var index = this.envDataForm.envDatas.indexOf(item);
            if (index !== -1) {
                const id = item.id;
                if (id.length == 32) {
                    this.$confirm('此操作将删除镜像环境变量参数, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 删除行
                        this.envDataForm.envDatas.splice(index, 1);
                        // 删除数据库中的数据
                        this.deleteImageParam(id,'env');
                    }).catch(() => {
                    });
                } else {
                    // 删除行
                    this.envDataForm.envDatas.splice(index, 1);
                }


            }
        },
        // 环境变量form数据添加一行
        addEnvDataFormRow() {
            this.envDataForm.envDatas.push({
                id: Date.now(),
                envKey: '',
                envValue: ''
            });
        },

        // 配置管理,删除一行
        removeConfigMapDataFormRow(item) {
            const index = this.configMapDataForm.configVolumesDatas.indexOf(item);
            if (index !== -1) {
                let config_id = item.id;
                if (config_id.length == 32) {
                    this.$confirm('此操作将删除镜像环境变量参数, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 删除行
                        this.configMapDataForm.configVolumesDatas.splice(index, 1);
                        // 删除数据库中的数据
                        this.deleteImageParam(config_id,'configMap');
                    }).catch(() => {
                    });
                } else {
                    this.configMapDataForm.configVolumesDatas.splice(index, 1);
                }

            }
        },
        // 配置管理.添加一行
        addConfigMapDataFormRow() {
            this.configMapDataForm.configVolumesDatas.push({
                id: Date.now(),
                mouthPath: '',
                configGroup: '',
                configFiles: '',
                configFilesArr: []
            });
        },
        // 有状态持久化卷,删除一行
        removeStatefulSetPVCDataFormRow(item) {
            const index = this.statefulSetPVCDataForm.statefulSetPVCDatas.indexOf(item);
            if (index != -1) {
                this.statefulSetPVCDataForm.statefulSetPVCDatas.splice(index,1);
            }
        },
        // 有状态持久化卷,添加一行
        addStatefulSetPVCDataFormRow() {
            this.statefulSetPVCDataForm.statefulSetPVCDatas.push({
                id: Date.now(),
                mouthPath: '',
                capacity: 10
            });
        },

        // 无状态持久化卷,删除一行
        removeDeploymentPVCDataFormRow(item) {
            const index = this.deploymentPVCDataForm.deploymentPVCDatas.indexOf(item);
            if (index != -1) {
                this.deploymentPVCDataForm.deploymentPVCDatas.splice(index,1);
            }
        },
        // 无状态持久化卷,添加一行
        addDeploymentPVCDataFormRow() {
            this.deploymentPVCDataForm.deploymentPVCDatas.push({
                id: Date.now(),
                mouthPath: '',
                pvc: ''
            });
        },
        // 启动参数,删除一行
        removeCommandArgsFormRow(item) {
            const index = this.commandArgsForm.commandArgs.indexOf(item);
            if (index != -1) {
                const id = item.id;
                if (id.length == 32) {
                    this.$confirm('此操作删除镜像启动参数, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 删除数据中的数据
                        this.commandArgsForm.commandArgs.splice(index,1);
                        this.deleteImageParam(id,'commandArg');
                    }).catch(() => {
                    });
                } else {
                    // 删除数据中的数据
                    this.commandArgsForm.commandArgs.splice(index,1);
                }


            }
        },
        // 启动参数添加一行
        addCommandArgsFormRow() {
            this.commandArgsForm.commandArgs.push({
                id: Date.now(),
                arg: ''
            })
        },

        // 选择部署类型时,显示/隐藏持久化卷
        showPVCTable() {
            if (this.appBaseInputForm.appKind == "Deployment") {
                this.showDeploymentPVCTable = true;
                this.showStatefulSetPVCTable = false;
                this.showAddDeploymentTableRowButton = true;
                this.showAddStatefulSetTableRowButton = false;
                this.appBaseInputForm.appKind = 'Deployment';
            } else {
                this.showDeploymentPVCTable = false;
                this.showStatefulSetPVCTable = true;
                this.showAddDeploymentTableRowButton = false;
                this.showAddStatefulSetTableRowButton = true;
                this.appBaseInputForm.appKind = 'StatefulSet';
            }
        },
        // 当选择不同的高可用类型时候显示/隐藏输入框
        changeImageHAType() {
            if (this.imageHighAvailabilityForm.type != 1) {
                this.showImageHAPort = true;
                this.showImageHAinitialDelaySeconds = true;
                this.showImageHATimeoutSeconds = true;
                this.showImageHAPeriodSeconds = true;
                if (this.imageHighAvailabilityForm.type == 2) {
                this.showImageHAPath = true;
                } else {
                this.showImageHAPath = false;
                }
            } else {
                this.showImageHAPort = false;
                this.showImageHAinitialDelaySeconds = false;
                this.showImageHATimeoutSeconds = false;
                this.showImageHAPeriodSeconds = false;
                this.showImageHAPath = false;
            }
        },
        // 校验基础信息数据
        validateImageBase() {

            // this.$refs.appBaseInputForm.validate( valid =>  {
            //     if (valid) {
            //         // 启动命令类型
            //         const commandType = this.appBaseInputForm.startCommand;
            //         if (commandType == 2 && this.appBaseInputForm.command.length <= 0) {
            //             this.$notify.warning(
            //                 '辅助设置,请输入自定义的启动命令'
            //             );
            //             this.checkImageBase =  false;
            //         } else {
            //             // 基本信息表单,校验通过
            //             // this.imageDataBean.imageBase = this.appBaseInputForm;
            //             // this.imageDataBean.imagePortList = this.portData;
            //             this.checkImageBase = true;
            //         }
            //     } else {
            //         this.checkImageBase =  false;
            //     }

            // });

            // setTimeout(() => {
            //     console.log();
            //  }, 5000);

            //return this.checkImageBase;
            return new Promise((resolve, reject) => {
                this.$refs.appBaseInputForm.validate( valid =>  {
                    if (valid) {
                        // 启动命令类型
                        const commandType = this.appBaseInputForm.startCommand;
                        if (commandType == 2 && this.appBaseInputForm.command.length <= 0) {
                            this.$notify.warning(
                                '辅助设置,请输入自定义的启动命令'
                            );
                        } else {
                            resolve(true);
                        }
                    }

                });
            });
        },
        // 端口检验
        validateImagePort() {
            // this.checkImagePort = true;
            // if (this.portDataForm.portDatas.length > 0) {
            //     this.$refs.portDataForm.validate(valid => {
            //         if (valid) {
            //             this.checkImagePort = true;
            //         } else {
            //             this.checkImagePort = false;
            //         }
            //     })
            // }
            // return this.checkImagePort;

            return new Promise((resolve, reject) => {
                if (this.portDataForm.portDatas.length > 0) {
                    this.$refs.portDataForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else {
                    resolve(true);
                }
            });
        },
        // 校验环境变量表单数据
        validateEnvData() {
            // this.checkImageEnv = true;
            // if (this.envDataForm.envDatas.length > 0) {
            //     this.$refs.envDataForm.validate(valid => {
            //         if (valid) {
            //             // this.imageDataBean.imageEnvList = this.envDataForm.envDatas;
            //             this.checkImageEnv = true;
            //         } else {
            //             this.checkImageEnv =  false;
            //         }
            //     })
            // }
            // return this.checkImageEnv;

            // 异步校验
            return new Promise((resolve, reject) => {
                if (this.envDataForm.envDatas.length > 0) {
                    this.$refs.envDataForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else {
                    resolve(true);
                }
            });
        },
        // 校验配置管理表单数据
        validateConfigMapData() {
            // 3: 配置管理表单
            // this.checkConfigMap = true;
            // if (this.configMapDataForm.configVolumesDatas.length > 0) {
            //     this.$refs.configMapDataForm.validate(valid => {
            //         if (valid) {
            //             // this.imageDataBean.imageConfigVolumesList = this.configMapDataForm.configVolumesDatas;
            //             this.checkConfigMap = true;
            //         } else {
            //             this.checkConfigMap =  false;
            //         }
            //     })
            // }
            // return this.checkConfigMap;

            // 异步校验
            return new Promise((resolve, reject) => {
                if (this.configMapDataForm.configVolumesDatas.length > 0) {
                    this.$refs.configMapDataForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else {
                    resolve(true);
                }
            });

        },
        // 校验持久化卷数据
        validatePVCData() {
            // 4: 持久化卷表单
            // this.checkPVCVolume = true;
            // if (this.appBaseInputForm.appKind == 'Deployment' && this.deploymentPVCDataForm.deploymentPVCDatas.length > 0) {
            //     this.$refs.deploymentPVCDataForm.validate(valid => {
            //         if (valid) {
            //             // this.imageDataBean.imageDeploymentPVCList = this.deploymentPVCDataForm.deploymentPVCDatas;
            //             this.checkPVCVolume = true;
            //         } else {
            //             this.checkPVCVolume =  false;
            //         }
            //     })
            // } else if (this.appBaseInputForm.appKind == 'StatefulSet' && this.statefulSetPVCDataForm.statefulSetPVCDatas.length > 0) {
            //     this.$refs.statefulSetPVCDataForm.validate(valid => {
            //         if (valid) {
            //             // this.imageDataBean.imageStatefulSetPVCList = this.statefulSetPVCDataForm.statefulSetPVCDatas;
            //             this.checkPVCVolume = true;
            //         } else {
            //             this.checkPVCVolume =  false;
            //         }
            //     })
            // } else {
            //     this.checkPVCVolume = true;
            // }
            // return this.checkPVCVolume;


            // 异步校验
            return new Promise((resolve, reject) => {
                if (this.appBaseInputForm.appKind == 'Deployment' && this.deploymentPVCDataForm.deploymentPVCDatas.length > 0) {
                    this.$refs.deploymentPVCDataForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else if (this.appBaseInputForm.appKind == 'StatefulSet' && this.statefulSetPVCDataForm.statefulSetPVCDatas.length > 0) {
                    this.$refs.statefulSetPVCDataForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else {
                   resolve(true);
                }
            });


        },
        // 校验高可用数据
        validateHAData() {
            // 5: 高可用信息
            // this.checkHA = true;
            // const type = this.imageHighAvailabilityForm.type;

            // if (type == 2 || type == 3) {
            //     this.$refs.imageHighAvailabilityForm.validate(valid => {
            //         if (valid) {
            //             if (this.imageHighAvailabilityForm.type == 2 && this.imageHighAvailabilityForm.path == '') {
            //                 this.$notify.warning(
            //                     '高可用设置,接口路径不能为空'
            //                 );
            //                 this.checkHA =   false;
            //             } else {
            //                 // this.imageDataBean.imageHA = this.imageHighAvailabilityForm;
            //                 this.checkHA = true;
            //             }

            //         } else {
            //             this.checkHA =  false;
            //         }
            //     });
            // } else {
            //     // this.imageDataBean.imageHA = this.imageHighAvailabilityForm;
            //     this.checkHA = true;
            // }
            // return this.checkHA;


            // 异步校验
            return new Promise((resolve, reject) => {
                const type = this.imageHighAvailabilityForm.type;

                if (type == 2 || type == 3) {
                    this.$refs.imageHighAvailabilityForm.validate(valid => {
                        if (valid) {
                            if (this.imageHighAvailabilityForm.type == 2 && this.imageHighAvailabilityForm.path == '') {
                                this.$notify.warning(
                                    '高可用设置,接口路径不能为空'
                                );
                            } else {
                                resolve(true);
                            }

                        }
                    });
                } else {
                    resolve(true);
                }
            });


        },
        // 校验启动参数表单
        validateCommandArgs() {
            // this.checkImageCommandArgs = true;
            // if (this.commandArgsForm.commandArgs.length > 0) {
            //     this.$refs.commandArgsForm.validate(valid => {
            //         if (valid) {
            //             // this.imageDataBean.commandArgs = this.commandArgsForm.commandArgs;
            //             this.checkImageCommandArgs = true;
            //         } else {
            //             this.checkImageCommandArgs = false;
            //         }
            //     })
            // }
            // return this.checkImageCommandArgs;

            // 异步校验
            return new Promise((resolve, reject) => {
                if (this.commandArgsForm.commandArgs.length > 0) {
                    this.$refs.commandArgsForm.validate(valid => {
                        if (valid) {
                            resolve(true);
                        }
                    })
                } else {
                    resolve(true);
                }
            });
        },

        // 提交,部署应用,设置镜像参数
        deployApp() {


            // this.validateImageBase().then(res => {
            //     console.log('validateImageBase=' + res);
            // })
            // this.validateImagePort().then(res => {
            //     console.log('validateImagePort=' + res);
            // })
            // this.validateEnvData().then(res => {
            //     console.log('validateEnvData=' + res);
            // })
            // this.validateConfigMapData().then(res => {
            //     console.log('validateConfigMapData=' + res);
            // })
            // this.validatePVCData().then(res => {
            //     console.log('validatePVCData=' + res);
            // })
            // this.validateHAData().then(res => {
            //     console.log('validateHAData=' + res);
            // })
            // this.validateCommandArgs().then(res => {
            //     console.log('validateCommandArgs=' + res);
            // })

            // 校验.start
            let _validateImageBase = this.validateImageBase();

            let _validateImagePort = this.validateImagePort();

            let _validateEnvData = this.validateEnvData();

            let _validateConfigMapData = this.validateConfigMapData();

            let _validatePVCData = this.validatePVCData();

            let _validateHAData = this.validateHAData();

            let _validateCommandArgs = this.validateCommandArgs();

            Promise.all([_validateImageBase,_validateImagePort,_validateEnvData,
                        _validateConfigMapData,_validatePVCData,_validateHAData,_validateCommandArgs]).then(() => {

                // 赋值
                this.imageDataBean.imageBase = this.appBaseInputForm;
                this.imageDataBean.imagePortList = this.portDataForm.portDatas;
                this.imageDataBean.imageEnvList = this.envDataForm.envDatas;
                this.imageDataBean.imageConfigVolumesList = this.configMapDataForm.configVolumesDatas;
                this.imageDataBean.imageDeploymentPVCList = this.deploymentPVCDataForm.deploymentPVCDatas;
                this.imageDataBean.imageStatefulSetPVCList = this.statefulSetPVCDataForm.statefulSetPVCDatas;
                this.imageDataBean.imageHA = this.imageHighAvailabilityForm;
                this.imageDataBean.commandArgs = this.commandArgsForm.commandArgs;


                // 提交到后台
                if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                    // 遮罩开始
                    const loading = this.$loading({ body: true });
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.appBaseInputForm.image);
                    // 1: 设置镜像的参数
                    this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_MANAGE_ADD_PATCH_IMAGE_BASE,this.imageDataBean).then(res => {
                        // 重新获取页面信息
                        this.getImageBase();
                        // 遮罩结束
                        loading.close();
                    })

                } else if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {

                    // 2: 根据选择的镜像部署应用
                    let namespace = this.userBaseInfo.getCurrentSelectedNamespace();

                    if (namespace != '' && typeof namespace != undefined) {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.appBaseInputForm.appName + '=' + this.appBaseInputForm.image + ':' + this.appBaseInputForm.imageVersion);
                        // 空间
                        this.imageDataBean.namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                        // 遮罩开始
                        const loading = this.$loading({ body: true });
                        this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_MANAGE_APP_CREATE_IMAGE,this.imageDataBean).then(res => {
                            // 遮罩结束
                            loading.close();
                            // 提交后,跳转页面
                            this.$router.push({
                                path: '/apply/management/app_page'
                            });
                            // 清楚缓存中的镜像名称
                            this.clearImageOnDeploy();
                        })
                    }

                }
            });

            // 1: 基础信息校验
            // if ( _validateImageBase && _validateImagePort && _validateEnvData && _validateConfigMapData
            //       &&   _validatePVCData && _validateHAData && _validateCommandArgs) {



            // } else {
            //     return false;
            // } // end of if


        },
        // 当点击选择镜像按钮时候,获取镜像仓库中的镜像列表
        getProjectImages() {
            // 得到仓库类型:private,public,store
            const houseType = this.selectImageSoreType;
            const projectName = '';
            if (houseType == "private") {
                // 如果仓库类型是私有,仓库名称是当前选择的空间名称
                this.projectName = this.userBaseInfo.getCurrentSelectedNamespace();
            } else {
                // 如果仓库类型是公有,商店,仓库名称是: public,store
                this.projectName =  this.selectImageSoreType;
            }

            if (this.projectName != '' && typeof this.projectName != undefined) {
                const param = {
                    projectName: this.projectName,
                    queryKey: this.queryImageKey
                };
                this.loadingImageTable = true;
                // 获取数据
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_GET_PROJECT_IMAGES,param).then(res => {
                    this.loadingImageTable = false;
                    this.imageDialogData = res.data;
                });
            }

        },
        // 根据选择的镜像,获取镜像的基本信息: 端口信息,环境变量信息,配置卷信息等等
        getImageBase() {
            // 根据镜像名称获取镜像信息
            // 默认是页面传入的镜像名称参数
            //const imageName = this.targetImageName;

            // 当当前动作为: 部署应用的时候,取: 页面上镜像名称
            //if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                //this.imageName = this.appBaseInputForm.image;
            //}
            if (this.appBaseInputForm.image != '' && typeof this.appBaseInputForm.image != 'undefined') {
                const param = {
                    imageName : this.appBaseInputForm.image
                }
                // 获取镜像基本的信息
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_MANAGE_GET_IMAGE_BASE,param).then(res => {
                    // 页面赋值
                    this.imageHighAvailabilityForm = res.data.imageHA;
                    this.appBaseInputForm = res.data.imageBase;
                    this.portDataForm.portDatas = res.data.portDataList;
                    this.envDataForm.envDatas = res.data.envDataList;
                    this.configMapDataForm.configVolumesDatas = res.data.configVolumesDataList;
                    this.commandArgsForm.commandArgs = res.data.commandArgs;

                    // 高可用折叠面板
                    this.changeImageHAType();

                    // 赋值设置是否禁用输入框
                    this.changeStartCommand(this.appBaseInputForm.startCommand);

                    // 展示pvctable
                    this.showPVCTable();


                });
            }
        },
        // 加载镜像版本下拉选择框
        getImageVersionTag() {
            let getImageTagUrl = this.projectConfig.URL_API_APP_MANAGE_IMAGE_TAG ;

            // 默认是页面传入的镜像名称参数
            //const imageName = this.targetImageName;

            // 当当前动作为: 部署应用的时候,取: 页面上镜像名称
            //if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
            //    this.imageName = this.appBaseInputForm.image;
            //}

            if ( this.appBaseInputForm.image != '' && typeof this.appBaseInputForm.image != 'undefined') {
                const param = {
                    imageName: this.appBaseInputForm.image
                };

                this.httpClient.httpClientget(getImageTagUrl,param).then(res => {
                    this.imageVersionArr = res.data;
                });
            }

        },
        // 点击,选择镜像对话框中的: 部署按钮
        selectedImageFromDailog: function(index,row) {
            const imageName = row.name;
            if (imageName != '' && typeof imageName != undefined) {
                // 赋值输入框
                this.appBaseInputForm.image = imageName;

                // 获取镜像信息
                this.getImageBase();

                // 关闭对话框
                this.selectImageFormVisible = false;

                // 禁用查看镜像版本明细按钮
                this.disabledImageVersionDescribedButton = true;

            }
        },
        // 镜像版本,下拉选择框出现/隐藏时候触发事件
        visibleChangeImageVersion(val) {
            if (val) {
                // 下拉框出现的时候,加载镜像版本
                this.getImageVersionTag();
            }
        },
        // 配置管理,配置组选择下拉框出现/隐藏触发事件,获取配置组
        visibleChangeConfigGroup(val) {
            if (val) {
                if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                    // 部署应用的时候才加载数据
                    // 获取配置组
                    this.getConfigGroupArr();
                }
            }
        },
        // 配置管理,配置组选择值发生变化,触发事件
        changeConfigGroupValue(index) {
            // 清空同一行中配置文件下拉选择框
            //this.configMapDataForm.configVolumesDatas[index].configFiles = [];
            // 得到选中行的对象
            const row = this.configMapDataForm.configVolumesDatas[index];

            if (row.configGroup != '' && typeof row.configGroup != undefined) {
                // 加载同一行的配置文件数组下拉选择列表
                // 先清空
                this.configMapDataForm.configVolumesDatas[index].configFiles = [];
                // 获取配置文件数组
                const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                const configMapName = row.configGroup;
                if (namespace != '' && configMapName != '' && typeof namespace != undefined && typeof configMapName != undefined) {
                    const getUrl = this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGFILE + '/' + namespace + '/' + configMapName;
                    this.httpClient.httpClientget(getUrl,'').then(res => {
                        const d = res.data;
                        const pns = [];
                        d.forEach(function(element) {
                            pns.push(element.fileName);
                        }, this);
                        this.configMapDataForm.configVolumesDatas[index].configFilesArr = pns;
                    })
                } else {
                    this.configMapDataForm.configVolumesDatas[index].configFiles = [];
                    this.configMapDataForm.configVolumesDatas[index].configFilesArr = [];
                }
            }
        },
        // 配置管理,得到配置组数据,根据目前选择空间
        getConfigGroupArr() {
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            const param = {
                namespace: namespace,
                queryKey: ''
            }
            // 获取数据
            this.httpClient.httpClientget(this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGMAP_NAMESPACE,param).then(res => {
                const d = res.data;
                const pns = [];
                d.forEach(function(element) {
                    if (element.fileCount > 0) {
                        pns.push(element.configMapName);
                    }
                }, this);
                this.configMapArr = pns;

            })
        },
        // 配置管理,根据选择的配置组,得到配置组文件数组
        getConfigFilesArr(index) {
            let row = this.configMapDataForm.configVolumesDatas[index];
            //row.configFiles = [];
                // 获取配置文件数组
            let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            let configMapName = row.configGroup;
            console.log(namespace)
            console.log(configMapName)
            if (namespace != '' && configMapName != '' && typeof namespace != undefined && typeof configMapName != undefined) {
                const getUrl = this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGFILE + '/' + namespace + '/' + configMapName;
                this.httpClient.httpClientget(getUrl,'').then(res => {
                    const d = res.data;
                    const pns = [];
                    d.forEach(function(element) {
                        pns.push(element.fileName);
                    }, this);
                    this.configMapDataForm.configVolumesDatas[index].configFilesArr = pns;
                })
            } else {
                //this.configMapDataForm.configVolumesDatas[index].configFiles = [];
                //this.configMapDataForm.configVolumesDatas[index].configFilesArr = [];
            }
        },
        // 删除镜像,参数
        deleteImageParam(id,type) {
            if (id != '' && typeof id != 'undefined' && id.length == 32) {
                if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                    const deleteUrl = this.projectConfig.URL_API_APP_MANAGE_GET_IMAGE_BASE + '/' + id + '/' + type;
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.appBaseInputForm.image);
                    // 提交后台操作
                    this.httpClient.httpClientDelete(deleteUrl,'').then(res => {

                    });
                }
            }
        },
        /////////////////////////////////////////////部署镜像相关////////////////////////////////////////////////////
        // 获取可用的pvc
        getPersistentVolumeClaimsAvailable() {
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            const param = {
                namespace: namespace,
            }

            this.httpClient.httpClientget(this.projectConfig.URL_API_APP_STORAGE_CLAIM_AVAILABLE,param).then(res => {
                this.deploymentPVCArr = res.data;
            })

        },
        // 无状态应用部署,获取可用的pvc
        visibleChangeDeploymentPVC(val) {
            if (val) {
                this.getPersistentVolumeClaimsAvailable();
            }
        },
        // 点击取消按钮事件
        back() {
            if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE) {
                // 清楚缓存中的镜像名称
                this.clearImageOnDeploy();
                // 回到应用查询主页
                this.$router.push({
                    path: '/apply/management/app_create'
                });
            } else if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
               /*  this.$router.push({
                    path: '/apply/mirror/manage'
                }); */
            }

        },
        // 将缓存中选择的镜像清空
        clearImageOnDeploy() {
            // 将缓存中的镜像名称设置为空
            let imageName = appManagement.getImageNameOnDeploy();
            if (imageName != '' && typeof imageName != 'undefined') {
                appManagement.setImageNameOnDeploy('');
            }
        },
        /////////////////////////新增pvc/////////////////////////////////////////////////
        //创建存储
        createStorage() {
            this.storageVisible = true;
            this.form1.pvcName = '';
        },
        //创建存储提交
        createStorageCommit() {
            this.$refs['f1'].validate((valid) => {
                if (valid) {
                    this.storageVisible = false;
                    let namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                    let reqStorageSize = '';
                    if (this.unitSelect == 'MB') {
                        reqStorageSize = this.selectSize + 'Mi';
                    } else {
                        reqStorageSize = this.selectSize + 'Gi';
                    }
                    let url = this.projectConfig.URL_API_APP_STORAGE_CLAIM;
                    url += "?namespace=" + namespace + "&pvcName="
                        + this.form1.pvcName + "&pvcAccessMode=" + this.selectAccessMode + "&reqStorageSize=" + reqStorageSize;
                    this.httpClient.httpClientPost(url).then((response) => {

                    });
                }
            });
        },
        // 改变单位
        unitChange: function(value) {
            if (value == 'MB') {
                //MB
                this.min = 100;
                this.max = 1023;
                this.selectSize = 100;
            } else {
                //GB
                this.min = 1;
                this.max = 1023;
                this.selectSize = 1;
            }
        },
        ////////////////////////////////镜像版本明细///////////////////////////////////////////
        // 选择镜像版本值变化触发事件
        changeImageVersionValue(val) {
            if ( val != '' && val != 'undefined' && val != null) {
                // 解除禁用镜像版本明细按钮
                this.disabledImageVersionDescribedButton = false;
            } else {

                this.disabledImageVersionDescribedButton = true;
            }
        },
        // 打开镜像版本明细对话框
        openImageVersionDescribedDailog() {
            this.imageVersionDescribedDialog = true;
            this.imageVersionDescrebedForm.image = '';
            this.imageVersionDescrebedForm.version = '';
            // 赋值
            this.imageVersionDescrebedForm.image = this.appBaseInputForm.image;
            this.imageVersionDescrebedForm.version = this.appBaseInputForm.imageVersion;
            if (this.imageVersionDescrebedForm.image !='' && this.imageVersionDescrebedForm.version != '' && typeof
                 this.imageVersionDescrebedForm.image != 'undefined' && this.imageVersionDescrebedForm.version != 'undefined'
                 && this.imageVersionDescrebedForm.image != null && this.imageVersionDescrebedForm.version != null) {
                let param = {
                    image: this.appBaseInputForm.image,
                    version: this.appBaseInputForm.imageVersion
                };
                // 获取镜像版本描述
                this.httpClient.httpClientget(this.projectConfig.URL_API_APP_GET_IMAGE_VERSION_DESCRIBED,param).then(res => {
                    this.imageVersionDescrebedForm.described = res.data.described;
                })
            }

        },






    }, // end of methods
    watch: {
        targetImageName: {
            handler: function(val, oldval) {
                // 如果是设置镜像动作,重新获取镜像信息
                if (this.pageAction == this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE) {
                    this.appBaseInputForm.image = val;
                    this.getImageBase();
                }
            }
        },
        pageAction: {
            handler: function(val, oldval) {
                this.getImageBase();
            }
        },
        // backOffUrl: {
        //     handler: function(val, oldval) {
        //        this.backOffUrl = val;
        //     }
        // },
        // forwardUrl: {
        //     handler: function(val, oldval) {
        //        this.forwardUrl = val;
        //     }
        // }
    }, // end of watch
};
</script>

<style>

.warehouse .mirror {
  position: absolute;
  left: 37%;
  bottom: 6px;
}

.warehouse .line {
  margin-top: 13px;
  float: left;
  width: 3px;
  height: 17px;
  margin-right: 10px;
  border-left: 3px solid #00a1ea;
}
.warehouse .Title {
  font-size: 15px;
}
.warehouse .el-tabs__active-bar {
  background: none;
}
.warehouse .el-tabs__header {
  border-bottom: none;
  margin: 0;
}

.warehouse .el-select {
  border-radius: 4px;
}
.warehouse .addkeys {
  margin: 10px 0 0 0px;
}
.warehouse .unit {
  margin-left: 4px;
  font-size: 15px;
  color: #999;
}
.warehouse .el-icon-plus {
  color: #fff;
}
.warehouse .BtnR {
  text-align: center;
  margin-top: 20px;
}

.warehouse .el-step.is-vertical .el-step__line {
  width: 1px;
  top: 0;
  bottom: -60px;
  left: 16px;
}
.warehouse .el-input-number {
  line-height: 28px;
}

.warehouse .el-table td,
.warehouse .el-table th {
  padding: 4px !important;
}
.warehouse .el-tabs__nav-wrap::after {
  background: none;
  height: 0;
}


.warehouse .el-input-number.is-controls-right .el-input-number__decrease{
   line-height: 14px;
}
.warehouse ol, .warehouse ul{
  display:flex;
  margin:0;
  padding:0;
}
.warehouse ol li{
   list-style: none;
  width:33.33%;
  color: #878d99;
  font-weight:bold;
  text-align: center;
  padding: 0 36px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6ebf5;
  font-size: 14px
}
.warehouse .config li{
  width:25%;
}
.warehouse ul li{
  list-style: none;
  width:33.33%;
  text-align:center;
}
.warehouse ul li .unit{
  position: absolute;
  margin-left: 8px;
}
.warehouse .manageForm li{
  width:25%;
}
.warehouse ul li .el-form-item{
  padding:6px 36px;
  border-bottom: 1px solid #e6ebf5;
}
.warehouse ul li .configuration{
  padding:6px 6px;
}
.warehouse .liPort .el-form-item{
  height: 40px;
  line-height: 40px;
  padding:0 6px;
}
.warehouse .liPort .el-input.is-disabled .el-input__inner{
  height: 30px !important;
}
.warehouse .liPort  .el-input--suffix .el-input__inner{
  height: 30px !important;
}
.warehouse .el-radio-button__inner{
    padding:8px 14px;
}
.warehouse .el-form-item__content .time{
    font-size:16px;
    color:#999;
    margin-left:4px;
}


</style>




